<wicket:panel>
	<div class="issue-side">
		<div class="fields">
			<div class="body">
				<table>
					<tr wicket:id="fields">
						<td class="name"><span wicket:id="name"></span></td>
						<td class="values d-flex flex-nowrap"><div wicket:id="values"></div></td>
					</tr>
				</table>
			</div>
		</div>
		<wicket:enclosure child="confidential">
		<div class="confidential d-flex align-items-center justify-content-between">
			<div class="font-weight-bolder mr-3"><wicket:t>Confidential</wicket:t></div>
			<div class="switch switch-sm switch-primary">
				<label>
					<input wicket:id="confidential" type="checkbox">
				</label>
			</div>
		</div>
		</wicket:enclosure>
		<div wicket:id="iterations" class="iterations">
			<div class="head"><wicket:t>Iterations</wicket:t></div>
			<ul class="body list-unstyled mb-0">
				<li wicket:id="iterations" class="bg-light rounded p-3">
					<div class="d-flex">
						<a wicket:id="link" class="mr-2"><span wicket:id="label"></span></a>
						<a wicket:id="delete" class="mr-2 flex-shrink-0" t:data-tippy-content="Remove issue from this iteration"><wicket:svg href="trash" class="icon icon-sm"></wicket:svg></a>
						<span wicket:id="status" class="status ml-auto"></span> 
					</div>
					<div wicket:id="progress" class="mt-3"></div>
				</li>
				<wicket:enclosure>
				<li class="add">
					<input wicket:id="add" type="hidden" class="form-control">
				</li>
				</wicket:enclosure>
			</ul>
		</div>
		<div wicket:id="votes" class="votes">
			<div class="head">
				<wicket:t>Issue Votes</wicket:t> (<span wicket:id="count"></span>) 
			</div>
			<div class="body">
				<wicket:enclosure child="voters">
				<div class="voters">
					<span wicket:id="voters" class="mr-2 mb-3 d-inline-block"><a wicket:id="voter" class="avatar"></a></span> <a wicket:id="more"><wicket:t>and more</wicket:t></a>
				</div>
				</wicket:enclosure>
				<a wicket:id="vote" class="btn btn-outline-secondary btn-sm vote"><wicket:svg href="thumb-up" class="icon mr-2"></wicket:svg> <span wicket:id="label"></span></a>
			</div>
		</div>
		<div wicket:id="watches" class="watches"></div>
		<div wicket:id="externalParticipants" class="external-participants">
			<div class="head"><wicket:t>External Participants</wicket:t></div>
			<ul class="body list-unstyled mb-0">
				<li wicket:id="externalParticipants" class="pb-2">
					<div class="d-flex">
						<span wicket:id="label" class="mr-2"></span>
						<a wicket:id="delete" class="flex-shrink-0 ml-auto" t:data-tippy-content="Remove this external participant from issue"><wicket:svg href="trash" class="icon icon-sm"></wicket:svg></a>
					</div>
				</li>
				<span class="form-text font-size-sm text-muted">
					<wicket:svg href="bulb" class="icon"></wicket:svg>
 					<wicket:t>External participants do not have accounts and involve in the issue via email</wicket:t>
				</span>
			</ul>
		</div>
		<div wicket:id="reference"></div>
		<wicket:enclosure child="delete">
			<div>
				<a wicket:id="delete" class="delete btn btn-light-danger"><wicket:t>Delete</wicket:t></a>
			</div>
		</wicket:enclosure>
	</div>
	<wicket:fragment wicket:id="userFrag">
		<a wicket:id="avatar"></a> <a wicket:id="name"></a>
	</wicket:fragment>
	<wicket:fragment wicket:id="nonEmptyValuesFrag">
		<div wicket:id="values" class="value"><span wicket:id="value"></span></div>	
	</wicket:fragment>
</wicket:panel>
